<template>
	<view class="groupactiveverify">
		<view class="pd-30">
			<view class="content_cell_box">
				<view class="mb-10 display_flex">
					<view class="f-14 flex-1">整体活动照片</view>
					<view v-if="form.bigimages_status==2" class="f-11 c-red" @click="showPopup(form.bigimages_text)">
						审核未通过
					</view>
				</view>
				<view class="content_img_box" v-for="(item,index) in form.bigimages" :key="index">
					<image class="content_img" :src="picUrl+item" mode="aspectFill">
					</image>
				</view>
				<view v-if="form.bigimages_status!=0" class="check_input_box">
					<view class="display_flex mt-10">
						<uni-icons v-if="form.bigimages_status==1" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>通过</span>
					</view>
					<view class="display_flex mt-10">
						<uni-icons v-if="form.bigimages_status==2" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>未通过</span>
					</view>
				</view>
				<view class="groupmanage_textarea c-red" v-if="form.bigimages_status==2">
					{{form.bigimages_text}}
				</view>
			</view>
			<view class="content_cell_box">
				<view class="mb-15 display_flex">
					<view class="f-14 flex-1">六大愉悦活动照片</view>
					<view v-if="form.image_status==2" class="f-11 c-red" @click="showPopup(form.image_text)">
						审核未通过
					</view>
				</view>
				<view class="mb-15" v-if="form.image1.length>0">
					<view class="mb-5 display_flex">
						<view class="f-14 flex-1">了解</view>
					</view>
					<view class="content_img_box" v-for="(item,index) in form.image1" :key="index">
						<image class="content_img" :src="picUrl+item" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="mb-15" v-if="form.image2.length>0">
					<view class="mb-5 display_flex">
						<view class="f-14 flex-1">相遇</view>
					</view>
					<view class="content_img_box" v-for="(item,index) in form.image2" :key="index">
						<image class="content_img" :src="picUrl+item" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="mb-15" v-if="form.image3.length>0">
					<view class="mb-5 display_flex">
						<view class="f-14 flex-1">创造</view>
					</view>
					<view class="content_img_box" v-for="(item,index) in form.image3" :key="index">
						<image class="content_img" :src="picUrl+item" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="mb-15" v-if="form.image4.length>0">
					<view class="mb-5 display_flex">
						<view class="f-14 flex-1">驾控</view>
					</view>
					<view class="content_img_box" v-for="(item,index) in form.image4" :key="index">
						<image class="content_img" :src="picUrl+item" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="mb-15" v-if="form.image5.length>0">
					<view class="mb-5 display_flex">
						<view class="f-14 flex-1">装饰</view>
					</view>
					<view class="content_img_box" v-for="(item,index) in form.image5" :key="index">
						<image class="content_img" :src="picUrl+item" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="mb-15" v-if="form.image6.length>0">
					<view class="mb-5 display_flex">
						<view class="f-14 flex-1">热爱</view>
					</view>
					<view class="content_img_box" v-for="(item,index) in form.image6" :key="index">
						<image class="content_img" :src="picUrl+item" mode="aspectFill">
						</image>
					</view>
				</view>
				<view v-if="form.image_status!=0" class="check_input_box">
					<view class="display_flex mt-10">
						<uni-icons v-if="form.image_status==1" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>通过</span>
					</view>
					<view class="display_flex mt-10">
						<uni-icons v-if="form.image_status==2" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>未通过</span>
					</view>
				</view>
				<view class="groupmanage_textarea c-red" v-if="form.image_status==2">
					{{form.image_text}}
				</view>
			</view>
			<view class="content_cell_box">
				<view class="mb-15 display_flex f-13">
					<view class="display_flex flex-1">
						<view class="mr-5">活动参与人数</view>
						<view>{{form.nums}}</view>
					</view>
					<view v-if="form.nums_status==2" class="f-11 c-red" @click="showPopup(form.nums_text)">
						审核未通过
					</view>
				</view>
				<view v-if="form.nums_status!=0" class="check_input_box">
					<view class="display_flex mt-10">
						<uni-icons v-if="form.nums_status==1" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>通过</span>
					</view>
					<view class="display_flex mt-10">
						<uni-icons v-if="form.nums_status==2" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>未通过</span>
					</view>
				</view>
				<view class="groupmanage_textarea c-red" v-if="form.nums_status==2">
					{{form.nums_text}}
				</view>
			</view>
			<view class="content_cell_box">
				<view class="mb-10 display_flex">
					<view class="f-14 flex-1">UGC截图</view>
					<view v-if="form.UGCimages_status==2" class="f-11 c-red" @click="showPopup(form.UGCimages_text)">
						审核未通过
					</view>
				</view>
				<view class="content_img_box" v-for="(item,index) in form.UGCimages" :key="index">
					<image class="content_img" :src="picUrl+item" mode="aspectFill">
					</image>
				</view>
				<view v-if="form.UGCimages_status!=0" class="check_input_box">
					<view class="display_flex mt-10">
						<uni-icons v-if="form.UGCimages_status==1" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>通过</span>
					</view>
					<view class="display_flex mt-10">
						<uni-icons v-if="form.UGCimages_status==2" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>未通过</span>
					</view>
				</view>
				<view class="groupmanage_textarea c-red" v-if="form.UGCimages_status==2">
					{{form.UGCimages_text}}
				</view>
			</view>
			<view class="content_cell_box">
				<view class="mb-10 display_flex">
					<view class="f-14 flex-1">老带新客户名单</view>
					<view v-if="form.userlist_id_status==2" class="f-11 c-red"
						@click="showPopup(form.userlist_id_text)">
						审核未通过
					</view>
				</view>
				<view class="groupauditlist_table_header">
					<uni-row gutter="8">
						<uni-col :span="4">
							<checkbox :checked="checkedAll==1" style="transform:scale(0.8)" :disabled="true" />
						</uni-col>
						<uni-col :span="4">
							<view class="text-c">ID</view>
						</uni-col>
						<uni-col :span="8">
							<view class="text-c">姓名</view>
						</uni-col>
						<uni-col :span="8">
							<view class="text-c">手机号</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="f-14 list">
					<checkbox-group>
						<label v-for="item in form.userlist" :key="item.id">
							<view class="groupaudit_cell">
								<uni-row gutter="8">
									<uni-col :span="4">
										<checkbox :value="item.id" :checked="item.checked" style="transform:scale(0.8)"
											:disabled="true" />
									</uni-col>
									<uni-col :span="4">
										<view class="text-c">{{item.id}}</view>
									</uni-col>
									<uni-col :span="8">
										<view class="text-c ellipsis">{{item.name}}</view>
									</uni-col>
									<uni-col :span="8">
										<view class="text-c ellipsis">{{item.mobile}}</view>
									</uni-col>
								</uni-row>
							</view>
						</label>
					</checkbox-group>
				</view>
				<view v-if="form.userlist.length==0" class="page_bottom_loading">- 暂无更多 -</view>
				<view v-if="form.userlist_id_status!=0" class="check_input_box">
					<view class="display_flex mt-10">
						<uni-icons v-if="form.userlist_id_status==1" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>通过</span>
					</view>
					<view class="display_flex mt-10">
						<uni-icons v-if="form.userlist_id_status==2" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>未通过</span>
					</view>
				</view>
				<view class="groupmanage_textarea c-red" v-if="form.userlist_id_status==2">
					{{form.userlist_id_text}}
				</view>
			</view>
		</view>
		<view class="groupactive_form_box" style="margin-top: 70rpx;">
			<view class="group_active_xiong_box">
				<view class="group_active_xiong">
					<image class="xiong_6" :src="onlinePic+'xiong.png'"></image>
				</view>
				<view class="racy_box">
					<view class="racy_text">活动核销</view>
					<view class="racy_line_box"></view>
				</view>
			</view>
			<view class="audit_box" :style="'padding-bottom:'+pdbottom+ 'rpx;'">
				<view class="f-18 f-w">{{form.status_text}}</view>
				<view :class="form.status==2?'f-12 mt-10 c-red':'f-12 mt-10'">
					<text>{{form.refuse_reason}}</text>
				</view>
				<view v-if="form.status==2" class="resubmit_text" @click="goRresubmit">重新提交</view>
			</view>
		</view>
		<view v-if="popupImg" class="mask_box" @click="closePopup"></view>
		<view class="popup_img_box" v-if="popupImg">
			<image class="popup_img" @load="loadPopupImg" :src="onlinePic+'manage/popup_img.png'" mode="widthFix">
			</image>
			<view v-if="showPopupText" class="popup_text_box">
				<text>{{popup_text}}</text>
			</view>
			<view class="pop_close_icon_box">
				<uni-icons class="pop_close_icon" @click="closePopup" type="close" color="#ffffff"
					size="50"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getActiveVerifyInfo,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				huodong_id: '',
				form: {
					nums: '', //实际活动参与人数
					bigimages: [], //整体活动照片
					UGCimages: [], //UGC截图
					image1: [],
					image2: [],
					image3: [],
					image4: [],
					image5: [],
					image6: [],
					userlist_id: [], //老带新客户id
					userlist: [],
				},
				popupImg: false,
				popup_text: '',
				showPopupText: false,
				checkedAll: 0,
				onlinePic: app.globalData.onlinePic,
				picUrl: app.globalData.picUrl,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets.bottom +
					60 : 60,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('userinfo').is_staff == 0) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}else{
				if (uni.getStorageSync('onload')) {
					this.getActiveVerifyInfo()
				}
			}
		},
		onLoad(options) {
			uni.showLoading({})
			if (uni.getStorageSync('userinfo').is_staff != 0) {
				this.huodong_id = options.huodong_id
				if (!uni.getStorageSync('onload')) {
					if (uni.getStorageSync('access_token')) {
						this.getActiveVerifyInfo()
					}
				}
			}
			var params = {
				event_code: '车友会活动核销结果',
				path: 'pages/groupmanage/groupactiveverifyresult',
				event_id: this.huodong_id,
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getActiveVerifyInfo() {
				getActiveVerifyInfo({
					huodong_id: this.huodong_id
				}).then(res => {
					if (res.state == 1) {
						this.form = res.data.info
						var userlist = res.data.info.userlist
						var userlist_id = res.data.info.userlist_id
						if (userlist.length > 0) {
							userlist.forEach(user => {
								// 检查user的id是否在list数组中  
								if (userlist_id.includes(user.id)) {
									// 如果在，将checked设置为true  
									user.checked = true;
								}
							});
							this.form.userlist = userlist
							if (userlist.length != userlist_id.length) {
								this.checkedAll = 0
							} else {
								this.checkedAll = 1
							}
						}
						uni.hideLoading()
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			goRresubmit() {
				uni.redirectTo({
					url: '/pages/groupmanage/groupactiveverify?huodong_id=' + this.huodong_id
				})
			},
			loadPopupImg() {
				this.showPopupText = true
			},
			showPopup(text) {
				this.popup_text = text
				// this.popupImg = true
			},
			closePopup() {
				this.popupImg = false
				this.popup_text = ''
			},
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {

			}
		}
	}
</script>

<style lang="scss">
	.groupactiveverify {

		.groupmanage_input_box {
			height: 84rpx;
			font-size: 26rpx;
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			border-radius: 4px;
			border: 2rpx solid #F7F7F7;
			background-color: #F7F7F7;

			.uni-select {
				border: 0px solid #E9E9E9 !important;
				box-sizing: border-box;
				border-radius: 4px;
				padding: 0 0 !important;
				border-bottom: solid 0px #E9E9E9 !important;
				width: 100%;
				flex: 1;
				height: 0 !important;
				margin-left: 10rpx;
				font-size: 26rpx;

				// .uni-icons {
				// 	display: none;
				// }
			}

			.time_input {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				height: 84rpx;
				padding: 0 30rpx;
				flex: 1;
			}

			.icon-calendar {
				display: none;
			}

		}

		.content_cell_box {
			margin: 20rpx 0;
			padding: 20rpx 30rpx;
			border-radius: 8rpx;
			border: 2rpx solid #F7F7F7;
			background-color: #F7F7F7;

			.active_top_img {
				width: 100%;
				height: calc(50vw - 60rpx);
				border-radius: 8rpx;
			}

			.active_top_img_block {
				width: 100%;
				height: calc(50vw - 60rpx);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #F0F0F0;
			}

			.content_img_box {
				position: relative;
				width: 100%;
				height: calc(50vw - 60rpx);
				border-radius: 8rpx;
				margin-bottom: 20rpx;

				.content_img {
					width: 100%;
					height: calc(50vw - 60rpx);
					border-radius: 8rpx;
				}

				.content_img_del {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					z-index: 1;
					padding: 20rpx;
				}
			}


			.content_img_block {
				width: 100%;
				height: calc(50vw - 60rpx);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #F0F0F0;
			}
		}

		.check_input_box {
			font-size: 26rpx;
			margin-top: 20rpx;
		}

		.groupmanage_textarea {
			font-size: 26rpx;
			height: 140rpx;
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 8rpx;
			border: 2rpx solid #F2F2F2;
		}

		.popup_img_box {
			position: fixed;
			top: 150rpx;
			left: 60rpx;
			right: 16rpx;
			z-index: 1001;

			.popup_img {
				width: 100%;
				vertical-align: middle;
			}

			.popup_text_box {
				color: #666666;
				font-size: 28rpx;
				position: absolute;
				top: 20%;
				left: 66rpx;
				right: 115rpx;
				z-index: 1002;
				line-height: 42rpx;
			}

			.pop_close_icon_box {
				position: absolute;
				bottom: -80rpx;
				left: 0;
				right: 0;
				z-index: 1002;
				text-align: center;
			}

		}

		.list {
			margin-top: 20rpx;

			.groupaudit_cell {
				padding: 20rpx 0;
				margin-bottom: 10rpx;
				border-radius: 8rpx;
				background-color: #F7F7F7;

				.user_avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100rpx;
					vertical-align: middle;
				}
			}
		}
	}
</style>